<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
	<title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body{padding:1rem 0;box-sizing:border-box;}
    </style>
</head>
<body>
<div class="container">
      <h2 id="status">未开始</h2>
</div>

<script type="text/javascript">


    var len = 300;

    var speed = 10;//speed
    var x = y = z = lastX = lastY = lastZ = 0;
    var steps = 0;


    var dataX = [];
    var dataY = [];
    var dataZ = [];
    var timer = null;
    var a = 0;
    timer = setInterval(function(){
        if (window.DeviceMotionEvent) { 
            window.addEventListener('devicemotion', tottle, false);  
        } 
    },3000)
    function $(id){
        return document.querySelector(id);
    }

    //延时器
    function tottle(){
        var isClear = arguments[0], eventData;
        if(typeof isClear == 'boolean'){
            eventData = arguments[1];
            eventData._tottleID && clearTimeout(eventData._tottleID);
        }else{
            eventData = isClear;
            tottle(true, eventData);
            eventData._tottleID = setTimeout(function(){
                deviceMotionHandler(eventData);
            }, speed);
            
        }
    }

    //加速度
    function deviceMotionHandler(eventData) {  
      var acceleration =eventData.accelerationIncludingGravity;
            x = acceleration.x || 0;
            y = acceleration.y || 0;
            z = acceleration.z || 0;

            dataX.push(x);
            dataY.push(y);
            dataZ.push(z);
 
            lastX = x;
            lastY = y;
            lastZ = z;

            if(dataZ.length>len){
                draw();
                window.removeEventListener('devicemotion', tottle);  
            }


    }

    //画步数
    function drawSteps(source){

        var data = source;
 
        var data1 = [];
        var data2 = [];
        var cou = 0;
        var threshold = 0;




        //均值滤波
        data.forEach(function(t, i){
            if(i>data.length-6 || i<5){
                data1.push(t);
            }else{
                // var _avg = (data[i] + data[i-1] + data[i-2] + data[i-3] + data[i-4] + data[i-5] + data[i-6] + data[i-7] + data[i-8] + data[i-9] + data[i-10] + data[i-11] + data[i-12] + data[i-13] + data[i-14])/15;
                var _avg = (data[i-4]+data[i-3]+data[i-2]+data[i-1]+data[i]+data[i+1]+data[i+2]+data[i+3]+data[i+4])/9;
                data1.push(_avg);
            }
        });

        data1.forEach(function(t, i){
            threshold += data1[i];
        });
        threshold = threshold / data1.length;


        data1.forEach(function(t, i){
            //去掉差值比较小的方式
            if(Math.abs(t-threshold)>0.2){
                if(t-threshold > 0){
                    data2.push(1);
                }else{
                    data2.push(-1);
                }
            }
        });

        data2.forEach(function(t, i){
            if((t > 0 && data2[i-1])<0 || (t<0 && data2[i-1] > 0)){
                cou++;
            }
        })

        var steps = Math.ceil(cou/2);
        a += steps;
        dataZ = [];
        $('#status').innerHTML = '你共走了' + a + '步';

    }

    function draw(){

        var _dataX = dataX.slice(0, len);
        var _dataY = dataY.slice(0, len);
        var _dataZ = dataZ.slice(0, len);


        drawSteps(_dataZ, '#0f0');  //上下方向
    }


</script>
</body>
</html>